<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户中心</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery/jquery.min.js"></script>
<script src="js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script src="js/jquery.validation/1.14.0/messages_zh.min.js"></script>
<style>
input.error {
	border: 1px solid #E6594E;
}
</style>
</head>
<body>
	<div class="container">
		<form id="addUserForm">
			</br>
			<div class="form-group">
				<label for="username"> 用户名称:</label> <input type="text"
					class="form-control" id="username" name="name"
					placeholder="输入名称" />
			</div>
			<div class="form-group">
				<label for="userpassword">用户密码：</label> <input type="password"
					 id="userpassword" name="password" placeholder="输入密码">
			</div>
			<div class="form-group">
				<label for="sex">用户性别：</label>
				<a class="form-control">
				<input type="radio" name="sex" title="男" value="男">男</input>
                <input type="radio" name="sex" title="女" value="女" checked>女</input>
                </a>
				 <!-- <input type="radio"
					class="form-control" id="usersex" name="userage" placeholder="输入年龄"> -->
			</div>
			<div class="form-group">
				<label for="userphone">用户联系方式：</label> <input type="text"
					class="form-control" id="userphone" name="phone" placeholder="输入联系方式">
			</div>
			<div class="form-group">
				<button type="button" id="saveBtn" class="btn btn-success">提交</button>
				<button type="button" id="cancelBtn" class="btn btn-default">取消</button>
			</div>
		</form>
	</div>
	<script>
		var addUser = function() {
			/*  */
			if (!check().form()) {
				return;
			}
			$.ajax({
				type : "GET",
				dataType : "json",
				url : "/user/add",
				data : {
					"name" : $("#username").val(),
					"password" : $("#userpassword").val(),
					"sex" : $("input[name='sex']:checked").val(),
					"phone" : $("#userphone").val()
				},
				success : function(msg) {
					alert(msg);
					$("#cancelBtn").click();
				}

			});

		}

		$("#saveBtn").on('click', function() {
			addUser();
		});

		$('#cancelBtn').on('click', function() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.getUserPageList();
			parent.layer.close(index);
		});
		//校验字段是否争正确
		function check(){
			 /*返回一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/ 
			 return $('#addUserForm').validate({
				 rules:{
					 username:{
						 required:true
					 },
					 userage:{
						 required:true
					 }
				 },
				 message:{
					 username:{
						 required:""
					 },
					 userage:{
						 required:""
					 }
				 }
			 });
		}
	</script>

</body>
</html>